<template>
  <div class="pages">
    <div class="top">
      <div class="top-avatar">
        <img :src="avatar(employeeInfo.image)" />
      </div>
      <div class="top-info">
        <div class="top-lline">
          <div class="user0">
            <span class="user0-name">{{ employeeInfo.name }}</span>
            <span class="user0-hr">|</span>
            <span class="user0-text">{{ employeeInfo.gender }}</span>
            <span class="user0-hr">|</span>
            <span class="user0-text">{{ employeeInfo.workType }}</span>
            <span class="user0-hr">|</span>
            <span class="user0-text">{{ employeeInfo.birthday }}</span>
          </div>
          <a class="phone" :href="phone(employeeInfo.mobile)">
            <span>{{ employeeInfo.mobile }}</span>
            <img class="phone-img" src="@/assets/dianhua.png" />
          </a>
        </div>
        <div class="top-lline">
          <div class="user1">
            <span class="user1-text">老板：</span>
            <span class="user1-name">{{ bossInfo.bossName }}</span>
          </div>
          <a class="phone" :href="phone(bossInfo.bossTel)">
            <span>{{ bossInfo.bossTel }}</span>
            <img class="phone-img" src="@/assets/dianhua.png" />
          </a>
        </div>
        <div class="user1">
          <!-- <span class="user1-text">项目：</span>
          <span class="user1-company">成都东安湖图书馆项目</span>-->
        </div>
      </div>
    </div>

    <div class="bottom">
      <table class="table" cellspacing="0">
        <tr>
          <th class="th-0">月份</th>
          <th class="th-1">
            工天
            <br />
            <span class="th-text">(个工)</span>
          </th>
          <th class="th-2">状态</th>
          <th class="th-3">查看</th>
        </tr>
        <template v-for="(item, index) in list" :key="index">
          <tr @click="toSignature(item.recordYear, item.recordMonth)">
            <td class="tb-top0">
              <div @click.stop="setxpand(item)">
                <Icon :class="['tb-top0-triangle', item.collapse ? 'down-to-up' : 'up-to-down']" name="play" color="#56B6FF" />
                {{ `${item.recordYear}年${item.recordMonth}月` }}
              </div>
            </td>
            <td class="tb-top1">{{ item.recordTotal }}</td>
            <td class="tb-top2">
              <div class="tb-top2-info">
                <div>
                  <div class="tb-top2-text1">未签字</div>
                  <div class="tb-top2-text2">
                    <span>{{ item.notSigned }}</span>
                    个工
                  </div>
                  <div v-show="item.pieceNotSigned" class="tb-top2-text2">
                    <span>{{ item.pieceNotSigned }}</span>
                    件
                  </div>
                </div>
                <div>
                  <div class="tb-top2-text1">已签字</div>
                  <div class="tb-top2-text2">
                    <span>{{ item.signed }}</span>
                    个工
                  </div>
                  <div v-show="item.pieceSigned" class="tb-top2-text2">
                    <span>{{ item.pieceSigned }}</span>
                    件
                  </div>
                </div>
              </div>
            </td>
            <td />
          </tr>
          <template v-for="(item1, index1) in item.detail" :key="index1">
            <tr v-show="item.collapse" @click="toSignature(item.recordYear, item.recordMonth)">
              <td class="tb-info0">{{ `${item1.recordMonth}月${item1.recordDay}日` }}</td>
              <td class="tb-top1">{{ item1.recordNum }}</td>
              <td class="tb-info2">{{ item1.desc }}</td>
              <td>
                <VanImage v-if="item1.base64Path" height="0.96rem" fit="contain" :src="item1.base64Path" />
              </td>
            </tr>
          </template>
        </template>
      </table>

      <div class="more">
        <div class="more-button" @click="toMore()">查看更多</div>
      </div>

      <div class="confirm">
        <div class="confirm-text1">{{ employeeInfo.name }}
          <!-- {{ list[0].recordYear }}年{{ list[0].recordMonth }}月 -->
        </div>
        <div class="confirm-text2">在您的项目组总记工为：{{ tatoal() }}个工</div>
        <div class="confirm-text3">
          <span>确认无误，点击</span>
          <div class="upload">
            <div class="confirm-button1">签字</div>
            <input ref="inputer" class="input" type="file" accept="image/*" capture="user" @change="chooseImage" />
          </div>
          <!-- <div class="confirm-button1" @click="chooseImage">签字</div>-->
          <span>确认</span>
        </div>
        <div class="confirm-text3">
          <span>记工有误，点击</span>
          <div class="confirm-button2" @click="nosign()">拒签</div>
          <span>通过微信沟通</span>
        </div>
      </div>
    </div>
    <!-- 签名弹窗 -->
    <Popup v-model:show="status" position="bottom" :style="{ height: '50%' }">
      <div class="popup">
        <div class="popuptart">
          <heSiginH5 v-if="isPhone" ref="heSiginEle" @setImg="setImg" />
          <heSigin v-else ref="heSiginEle" @setImg="setImg" />
        </div>
        <div class="popupend">
          <div class="popupend-button1" @click="clear()">
            <img class="popupend-img" src="@/assets/clear.png" />
            重写
          </div>
          <div class="popupend-button1" @click="sign(false)">取消</div>
          <div class="popupend-button2" @click="ok()">提交</div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import heSigin from '@/components/sgin.vue'
import heSiginH5 from '@/components/sginH5.vue'
import { allsigndata, getboss, workerinfo, getQiniuToken, savesign } from '@/api/businessApi'
import { Toast, Popup, Icon, Image as VanImage } from 'vant'
import axios from 'axios'
export default defineComponent({
  components: { heSigin, heSiginH5, Popup, Icon, VanImage },
  setup() {
    let promisea, promiseb, promisec
    const IMGURL = ref(import.meta.env.VITE_APP_IMGURL)
    const { proxy }: any = getCurrentInstance()
    const avatar = (img: string): string => {
      let newimg: string = ''
      if (img.indexOf('http') === -1) {
        newimg = IMGURL.value + img
      } else {
        newimg = img
      }
      return newimg
    }
    const tatoal = (): string => {
      const sum = (prev, cur) => prev + cur.recordTotal * 1
      const num = list.value.reduce(sum, 0)
      return num || 0
    }
    /** 判斷设备*/
    const isPhone = ref<boolean>(true)
    if (
      navigator.userAgent.match(
        /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
      )
    ) {
      isPhone.value = true
    } else {
      isPhone.value = false
    }
    /** -----------------签字-----------------------*/
    const status = ref<boolean>(false)
    const sign = (e: boolean) => {
      status.value = e
    }
    /** 签字板*/
    const heSiginEle = ref<any>(null)
    const ok = () => {
      heSiginEle.value.ok()
    }
    const clear = () => {
      heSiginEle.value.clear()
    }
    /** 提交*/
    const setImg = (img: string) => {
      let arr: Array<any> = []
      list.value.forEach((a) => {
        const item = a.detail
          .filter((res: any) => res.status === 50)
          .map((res: any) => res.recordId)
        arr = [...item, ...arr]
      })
      const params: object = {
        imgPath: imgPath,
        base64Path: img,
        recordWorkIds: arr
      }
      savesign(params).then(() => {
        sign(false)
        getList()
        Promise.all([promisea]).then(() => {
          Toast.clear()
          Toast({
            message: '已签字',
            position: 'bottom'
          })
        })
      })
    }
    /** 拒签*/
    const nosign = () => {
      Toast({
        message: '已拒签',
        position: 'bottom'
      })
      setTimeout(() => {
        proxy.$wx.closeWindow()
      }, 500)
    }
    /** --------------------------------------------*/

    // http://wx.yuegongjia.com/#/confirm_work?foremanTel=18227979411&workerId=1234567890&recordYear=2021&recordMonth=09

    /** ------------------储存数据-------------------*/
    const route = useRoute()
    const store = useStore()
    const foremanTel = route.query.foremanTel
    const bossTel = route.query.bossTel
    const workerId = route.query.workerId
    const recordYear = route.query.recordYear
    const recordMonth = route.query.recordMonth
    store.commit('app/SET_FOREMANTEL', foremanTel)
    store.commit('app/SET_BOSSTEL', bossTel)
    store.commit('app/SET_WORKID', workerId)
    store.commit('app/SET_RECORDYEAR', recordYear)
    store.commit('app/SET_RECORDMONTH', recordMonth)
    /** --------------------------------------------*/

    /** ----------------获取数据---------------------*/
    const list = ref<any>([{ recordYear: '', recordMonth: '' }])
    const getList = () => {
      promisea = allsigndata({
        foremanTel: store.getters.foremanTel,
        bossTel: store.getters.bossTel,
        workerId: store.getters.workerId,
        recordYear: store.getters.recordYear,
        recordMonth: store.getters.recordMonth
      }).then((res) => {
        list.value = res.data.map((res) => {
          return { ...res, collapse: true }
        })
      })
    }
    getList()
    const bossInfo = reactive({ bossName: '', bossTel: '' })
    const getbossInfo = () => {
      promiseb = getboss({
        foremanTel: store.getters.foremanTel,
        workerId: store.getters.workerId,
        bossTel: store.getters.bossTel
      }).then((res) => {
        bossInfo.bossName = res.data[0]?.bossName
        bossInfo.bossTel = store.getters.bossTel
      })
    }
    getbossInfo()

    const employeeInfo = reactive({
      birthday: '',
      gender: '',
      mobile: '',
      name: '',
      nation: '',
      workType: '',
      image: ''
    })
    const getworkerinfo = () => {
      promisec = workerinfo(store.getters.workerId).then((res) => {
        Object.assign(employeeInfo, res.data)
      })
    }
    getworkerinfo()
    /** --------------------------------------------*/

    /** ---------------拍照上传---------------------*/
    // const { proxy }: any = getCurrentInstance()
    // store.dispatch('wechat/config', ['chooseImage', 'uploadImage'])
    // const chooseImage = () => {
    //   proxy.$wx.chooseImage({
    //     count: 1, // 默认9
    //     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    //     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    //     success: (a) => {
    //       console.log(a.localIds)
    //       proxy.$wx.uploadImage({
    //         localId: a.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
    //         isShowProgressTips: 1, // 默认为1，显示进度提示
    //         success: (b) => {
    //           console.log(b)
    //         }
    //       })
    //     }
    //   })
    // }
    const inputer = ref<any>(null)
    const upladUrl: any = import.meta.env.VITE_APP_QINIUYUN
    let imgPath: String = ''

    const uploadConfig = reactive({
      showAction: import.meta.env.VITE_APP_IMGURL,
      data: {
        key: '',
        token: ''
      }
    })
    // eslint-disable-next-line space-before-function-paren
    const getQiniuTokennFun = async () => {
      await getQiniuToken().then((res) => {
        uploadConfig.data.token = res.data
        uploadConfig.data.key = 'wx/sgin/' + new Date().getTime()
      })
    }
    // wx/sgin/1633760264104
    // eslint-disable-next-line space-before-function-paren
    const chooseImage = async () => {
      let arr: Array<any> = []
      list.value.forEach((a) => {
        const item = a.detail
          .filter((res: any) => res.status === 50)
          .map((res: any) => res.recordId)
        arr = [...item, ...arr]
      })
      if (arr.length === 0) {
        Toast({
          message: '暂无未签字数据',
          position: 'bottom'
        })
        return
      }
      await getQiniuTokennFun()
      const img_file = inputer.value
      var formData = new FormData()
      var fileObj = img_file.files[0]
      if (fileObj.type !== 'image/jpeg') {
        Toast({
          message: '请上传图片',
          position: 'bottom'
        })
        return
      }
      formData.append('file', fileObj)
      formData.append('key', uploadConfig.data.key)
      formData.append('token', uploadConfig.data.token)
      await axios.post(upladUrl, formData).then((res) => {
        imgPath = res.data.key
        Toast.clear()
        Toast({
          message: '照片上传成功',
          position: 'bottom'
        })
        inputer.value.value = null
        sign(true)
      })
    }

    /** --------------------------------------------*/

    const router = useRouter() // 组件内路由
    //  const route = useRoute() // 组件内路由信息

    const setxpand = (row) => {
      row.collapse = !row.collapse
    }

    /** 查看更多按扭*/
    const toMore = () => {
      router.push({ name: 'More' })
    }
    /** 查看签字*/
    const toSignature = (recordYear: string, recordMonth: string) => {
      router.push({
        name: 'Signature',
        query: {
          recordYear,
          recordMonth
        }
      })
    }
    /** 格式化手机号链接*/
    const phone = (e: string): string => {
      return 'tel:' + Number(e)
    }
    Promise.all([promisea, promiseb, promisec]).then(() => {
      Toast.clear()
    })
    return {
      isPhone,
      // 签字
      status,
      sign,
      nosign,
      heSiginEle,
      ok,
      clear,
      setImg,
      toMore,
      toSignature,
      phone,
      list,
      setxpand,
      bossInfo,
      employeeInfo,
      // 文件上传
      inputer,
      chooseImage,
      avatar,
      tatoal
    }
  }
})
</script>

<style lang="scss" scoped>
.pages {
  background: #f7f7f7;
  min-height: 100vh;
  padding: 16px 10px;
}
.top {
  width: $width730;
  height: 156px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 0 20px 31px;
  display: flex;
  &-avatar {
    height: 115px;
    width: 115px;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    padding-left: 10px;
    padding-right: 60px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  &-lline {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.phone {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 400;
  color: #333333;
  span {
    padding-right: 10px;
  }

  &-img {
    width: 28px;
    height: 29px;
  }
}
.user0 {
  &-name {
    font-size: 30px;
    color: #333333;
    font-weight: bold;
  }
  &-text {
    font-size: 26px;
    color: #666666;
  }
  &-hr {
    font-size: 26px;
    color: #666666;
    padding: 0 6px;
  }
}
.user1 {
  font-size: 24px;
  font-weight: 400;
  &-text {
    color: #666666;
  }
  &-name {
    color: #56b6ff;
  }
  &-company {
    color: #333333;
  }
}
.bottom {
  margin-top: 17px;
  width: $width730;
  background: #ffffff;
  padding-bottom: 66px;
}
.table {
  width: 730px;
  th {
    background: #56b6ff;
    color: #ffffff;
    height: 72px;
    font-size: 30px;
    font-weight: 400;
  }
  .th {
    &-text {
      font-size: 22px;
    }
    &-0 {
      width: 194px;
    }
    &-1 {
      width: 105px;
    }
    &-2 {
      width: 258px;
    }
  }
  tr th {
    border-right: 1px solid #fff;
  }
  tr th:last-child {
    border-color: transparent;
  }

  tr td {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  tr td:last-child {
    border-right-color: transparent;
  }
  td {
    height: 72px;
  }
}
.tb {
  &-top0 {
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    > div {
      display: flex;
      align-items: center;
    }
    &-triangle {
      font-size: 24px;
    }
  }
  &-top1 {
    font-size: 18px;
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
  }
  &-top2 {
    padding-left: 30px;
    padding-right: 30px;
    &-info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    &-text1 {
      color: #666666;
      font-size: 20px;
    }
    &-text2 {
      padding-top: 2px;
      color: #333333;
      font-size: 16px;
      span {
        font-size: 18px;
        color: #ff6616;
      }
    }
  }
  &-info0 {
    color: #666666;
    font-size: 26px;
    text-indent: 1em;
  }
  &-info2 {
    font-size: 18px;
    text-align: center;
  }
}
.more {
  padding: 16px 19px;
  text-align: right;
  &-button {
    font-size: 36px;
    font-weight: 400;
    color: #56b6ff;
  }
}
.confirm {
  padding-left: 15px;
  padding-top: 100px;
  &-button1 {
    width: 114px;
    height: 44px;
    font-size: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-button2 {
    width: 114px;
    height: 44px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6616;
    border-radius: 10px;
    border: 2px solid #ff6616;
    margin: 0 5px;
  }
  &-text1 {
    font-size: 26px;
    color: #333333;
  }
  &-text2 {
    text-indent: 1.5em;
    font-size: 26px;
    color: #333333;
  }
  &-text3 {
    padding: 32px 0 0 88px;
    font-size: 30px;
    color: #333333;
    display: flex;
  }
}
.popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.popuptart {
  flex: 1;
  display: flex;
}
.popupend {
  padding: 0 12px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  &-img {
    width: 20px;
    height: 20px;
  }
  &-button1 {
    width: 129px;
    height: 51px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #56b6ff;
    line-height: 51px;
    text-align: center;
    font-size: 22px;
    color: #4db0fd;
    margin-left: 12px;
  }
  &-button2 {
    width: 129px;
    height: 51px;
    background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
    border-radius: 6px;
    border: 1px solid #56b6ff;
    line-height: 51px;
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    margin-left: 12px;
  }
}
.upload {
  width: 114px;
  height: 44px;
  margin: 0 5px;
  display: inline-block;
  position: relative;
  .input {
    width: 114px;
    height: 44px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  input {
    width: 114px;
    height: 42px;
    opacity: 0;
  }
}
/**箭头翻转效果*/
.up-to-down {
  animation: upTodown 0.3s ease forwards;
}
.down-to-up {
  animation: downToup 0.3s ease forwards;
}
@keyframes downToup {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes upTodown {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>
